<template>
  <div>
    App: {{money}}
    <hr/>
    <Parent/>
  </div>
</template>

<script>
import { ref, provide } from 'vue';
import Parent from './Parent.vue';
export default {
  name: 'App', 
  components: {
    Parent
  },
  setup () {
    const money = ref(100)

    // !#3 单项数据流：数据在哪来的就在哪改
    const changeMoney = (n)=> {
      money.value -= n
    }
    // !#1 provide 提供数据
    // 数据名，内容（啥都行）
    provide('moneyData', {
      money,
      changeMoney
    })
    return {
      money
    }
  }
}
</script>

<style lang="scss" scoped>

</style>